import React from 'react';
import SubHeaderComponent from '../../../components/subHeader/index';
import * as Request from '../../../services/reg/index';
import { Switch, Toast } from 'antd-mobile';
import Css from '../../../assets/css/home/reg/index.css';

class RegIndex extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            checked: false,
            sCellphone: '',
            bCodeSuccess: false,
            sCode: '',
            sCodeText: '获取短信验证码',
            sPassword: '',
            sType: 'password'
        }   
        this.timer = null;
        this.bSendCode = true;
        this.bSubmit = true;
    }

    componentDidMount(){
        document.getElementById('title').innerHTML = '会员注册';
    }

    //验证手机号
    checkCellphone(e){
        this.setState({ sCellphone: e.target.value }, () => {
            if(this.bSendCode){
                if(this.state.sCellphone.match(/^1[0-9][0-9]{9}/)){
                    this.setState({ bCodeSuccess: true });
                }else{
                    this.setState({ bCodeSuccess: false });
                }
            }
        });
    }

    //获取短信验证码
    async getCode(){
        const resData = await this.isSameCellphone();
        if(resData.code === 200){ //async/await还是异步，只是改变为同步的执行方式
            if(resData.data.isreg === '1'){
                Toast.info('你输入的手机号已存在', 2);
                return false;
            }
        }
        if(this.bSendCode && this.state.bCodeSuccess){
            let iTime = 10;
            this.bSendCode = false;
            this.setState({ sCodeText: `重新发送(${iTime}s)`, bCodeSuccess: false });
            this.timer =  setInterval(() => {
                if(iTime > 0){
                    iTime--;
                    this.setState({ sCodeText: `重新发送(${iTime}s)` });
                }else{
                    clearInterval(this.timer);
                    this.bSendCode = true;
                    this.setState({ sCodeText: '获取短信验证码', bCodeSuccess: true });
                }
            }, 1000);
        }
    }

    //注册用户
    async register(){
        const { sCellphone, sCode, sPassword } = this.state;
        if(sCellphone.match(/^\s*$/)){
            Toast.info('请输入您的手机号', 2);
            return false;
        }
        if(!sCellphone.match(/^1[0-9][0-9]{9}/)){
            Toast.info('您输入的手机号格式有误', 2);
            return false;
        }
        const resData = await this.isSameCellphone();
        if(resData.code === 200){ //async/await还是异步，只是改变为同步的执行方式
            if(resData.data.isreg === '1'){
                Toast.info('您输入的手机号已注册', 2);
                return false;
            }
        }
        if(sCode.match(/^\s*$/)){
            Toast.info('请输入短信验证码', 2);
            return false;
        }
        if(sPassword.match(/^\s*$/)){
            Toast.info('请输入密码', 2);
            return false;
        }
        if(this.bSubmit){
            this.bSubmit = false;
            Request.reg({ cellphone: sCellphone, vcode: sCode, password: sPassword }).then(res => {
                if(res.code === 200){
                    Toast.info('注册成功');
                    this.props.history.goBack();
                }else{
                    Toast.info(res.data, 1);
                }
            });
        }
    }

    //显示隐藏密码
    switchChange(){
        this.setState({ checked: !this.state.checked }, () => {
            const type = this.state.checked ? 'text' : 'password';
            this.setState({ sType: type });
        });
    }

    //监测手机号是否注册过
    isSameCellphone(){
        return Request.isReg({ username: this.state.sCellphone }).then(res => {
            return res;
        });
    }

    componentWillUnmount(){
        clearInterval(this.timer);
        this.setState = (state, callback) => { return ; }
    }

    render(){
        const { checked, sCellphone, bCodeSuccess, sCodeText, sCode, sPassword, sType } = this.state;
        return (
            <div className={Css['page']}>
                {/* 头部 */}
                <SubHeaderComponent title='会员注册'></SubHeaderComponent>  
                <div className={Css['main']}>
                    <div className={Css['cellphone-wrap']}>
                        <div className={Css['cellphone']}>
                            <input type='tel' value={sCellphone} onChange={(e) => this.checkCellphone(e)} placeholder="请输入手机号" />
                        </div>
                        <div className={bCodeSuccess ? Css['code-btn']+' '+Css['success'] : Css['code-btn']} onClick={() => this.getCode()}>{sCodeText}</div>
                    </div>
                    <div className={Css['code-wrap']}>
                        <input type='text' value={sCode} onChange={(e) => this.setState({ sCode: e.target.value })} placeholder="请输入短信验证码" />
                    </div>
                    <div className={Css['password-wrap']}>
                        <div className={Css['password']}>
                            <input type={sType} value={sPassword} onChange={(e) => this.setState({ sPassword: e.target.value })} placeholder="请输入密码" />
                        </div>
                        <div className={Css['switch-wrap']}>
                            <Switch checked={checked} color='#EB1625' onChange={() => this.switchChange()}></Switch>
                        </div>
                    </div>
                    <div className={Css['sure-btn']} onClick={() => this.register()}>注册</div>
                </div>
            </div>
        )
    }
}

export default RegIndex;